<html>
<head>


<style for="train-pagination">

    @keyframes lineA {
        0%, 100% {
            clip-path: inset(0 0 calc(100% - 4px) 0)
        }
        25% {
            clip-path: inset(0 calc(100% - 4px) 0 0)
        }
        50% {
            clip-path: inset(calc(100% - 4px) 0 0 0)
        }
        75% {
            clip-path: inset(0 0 0 calc(100% - 4px))
        }
    }

    @keyframes lineB {
        0%, 100% {
            clip-path: inset(calc(100% - 4px) 0 0 0)
        }
        25% {
            clip-path: inset(0 0 0 calc(100% - 4px))
        }
        50% {
            clip-path: inset(0 0 calc(100% - 4px) 0)
        }
        75% {
            clip-path: inset(0 calc(100% - 4px) 0 0)
        }
    }

    .pagination-wrap {
        position: relative;
    }

    .vine-border {
        z-index: 3;
        position: absolute;
        left: -2px;
        top: 0;
        width: 640px;
        height: 360px;
        padding-top: 20px;
        margin: 0px auto;
        background-image: url(/img/vine-top.png), url(/img/vine-bottom.png);
        background-repeat: no-repeat;
        background-size: 644px 240px;
        background-position: top 20px left 0, bottom 0px left 0;
        background-clip: content-box;
    }

    .flow-border {
        z-index: 3;
    }

    .flow-border::after,
    .flow-border::before {
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        content: '';
        padding: 0 46.5px;
        margin-left: -24px;
        margin-right: -29px;
        margin-top: -42px;
        margin-bottom: -120px;
        border-style: double;
        border-color: rgb(207, 230, 149);
        border-width: 14px 12px;
        -webkit-border-image: url(/img/green-zebra.png) 20 20 stretch;
    }

    .flow-border::before {
        -webkit-animation: lineA 22s linear infinite;
        -o-animation: lineA 22s linear infinite;
        animation: lineA 22s linear infinite;
    }

    .flow-border::after {
        -webkit-animation: lineB 22s linear infinite;
        -o-animation: lineB 22s linear infinite;
        animation: lineB 22s linear infinite;
    }

    .pagination {
        position: absolute;
        top: 60px;
        width: 596px;
        height: 204px;
        text-align: center;
        margin-left: 25px;
    }

    .train {
        margin: 10px auto;
        padding-bottom: 3px;
        width: 80%;
        position: relative;
        font-size: 0;
        height: 65px;
    }

    @keyframes move-railway {
        0% {
            background-position: left 100% top -26px
        }
        /*50%{background-position: left 50% top -26px}*/
        100% {
            background-position: left 0% top -26px
        }
    }

    .train:after { /*这是画铁路*/
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        height: 10px;
        background-image: url(/img/train-pagination-sprite.png);
        background-size: 129px 106px;
        background-position: 0px -26px;
        background-repeat: repeat-x;
        animation: move-railway linear 12s infinite;
    }

    .pagination-control-bar {
        margin-top: 28px;
    }

    .pagination ul {
        text-align: center;
    }

    ul, li {
        display: inline-block;
    }

    .train li.train-head,
    .train li {
        position: relative;
        font-size: 12px;
        display: inline-block;
    }

    .train li {
        padding-top: 20px;
        padding-left: 10px;
        width: 84px;
        height: 12px;
        background-color: rgba(100, 200, 100, .2);
        background-image: url(/img/train-pagination-bg.jpg);
        background-size: 340px 55px;
        background-position: left -24px top -8px;
        background-repeat: no-repeat;
        line-height: 0px;
    }

    .train li:last-of-type {
        width: 78px;
    }

    .train li:last-of-type:before {
        -moz-border-radius-topright: 30px;
        width: 88px;
        height: 14px;
        /*bottom: 1px;*/
    }

    .train li:after,
    .train li:before { /*这是车箱底盘以下和轮子下半截*/
        content: '';
        position: absolute;
        left: 0;
        bottom: -12px;
        height: 13px;
    }

    /*是车箱底盘以下和轮子下半截*/
    .train li:before {
        z-index: 2;
        left: -2px;
        right: 0;
        background-color: #3F7C15;
        width: 89px;
        border-radius: 3px;
    }

    /*.train li:last-of-type:after,*/
    .train li:after {
        content: '';
        position: absolute;
        left: -.5px;
        width: 100px;
        height: 13px;
        background-image: url(/img/train-pagination-bg.jpg);
        background-size: 360px 112px;
        background-position: left -.128rem bottom -18px;
        background-repeat: no-repeat;
        -webkit-filter: hue-rotate(100deg) saturate(50%) grayscale(50%);
        -moz-filter: saturate(100%) grayscale(5%);
        -ms-filter: saturate(100%) grayscale(5%);
        filter: hue-rotate(100deg) saturate(50%) grayscale(50%);
    }

    .train li.train-head,
    .train li.train-head .head-mask {
        width: 90px;
        background-color: rgba(100, 200, 100, .2);
        background-image: url(/img/train-pagination-bg.jpg);
        background-repeat: no-repeat;
    }

    .train li.train-head:before {
        bottom: 0;
        left: -3px;
        width: 91px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .train li.train-head {
        background-size: 360px 124px;
        height: 58px;
        /*top: -13px;*/
        bottom: 33px;
        right: 0px;
        background-position: right -40px bottom -20px;
    }

    .train li.train-head:after {
        bottom: -2px;
        left: 0px;
        width: 102px;
        background-position: left -223px bottom -8px;
    }

    .train li {
        -webkit-filter: saturate(62%) grayscale(5%);;
        -moz-filter: saturate(62%) grayscale(5%);
        -ms-filter: saturate(62%) grayscale(5%);
        filter: saturate(65%) grayscale(5%);
    }

    .train li#page-wrap {
        position: relative;
        top: -14px;
        padding-top: 14px;
        padding-left: 0;
        padding-bottom: 6px;
        padding-right: 10px;
    }

    .train a {
        position: relative;
        display: inline-block;
        /*display: block;*/
        height: 18px;
        width: 57px;
        text-align: center;
        color: #2a4;
    }

    .train-head a.head-mask {
        z-index: 1;
        position: absolute;
        right: 12px;
        bottom: -2px !important;
        background-color: #fff;
        width: 82px !important;
        height: 10px;
    }

    .train-head a.head-mask:before {
        position: relative;
        display: inline-block;
        right: -36px;
        content: '';
        width: 18px;
        height: 4px;
        background-color: #9da4a6;
        border-top: 0;
        border-top-width: 0px;
        border-top-style: initial;
        border-top-color: initial;
        bottom: -4px;
    }

    .train-head a.head-mask:after {
        bottom: -4px;
        content: '';
        position: absolute;
        right: -30px;
        width: 50px;
        height: 6px;
        background-color: #fff;
    }

    .train a span {
        width: 60px;
        height: 20px;
        display: inline-block;
        position: absolute;
        left: -9px;
    }

    .train a:hover {
        color: #2f3;
    }

    @keyframes scroll {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .wheels:before,
    .wheels:after {
        z-index: 4;
        content: '';
        bottom: -23px;
        position: absolute;
        display: inline-block;
        width: 25px;
        height: 25px;
        background-image: url(/img/train-pagination-sprite.png);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        animation: scroll 4s linear infinite;
    }

    .wheels:before {
        left: -20px;
    }

    .train li.train-head .wheels:after,
    .train li.train-head .wheels:before {
        bottom: -53px;
    }

    .train li.train-head .wheels:before {
        left: -7px;
    }

    #page-wrap a .page-input {
        outline: 0px;
        border: 0;
        margin: 0;
        margin-left: 4px;
        font-size: 12px;
        width: 61px;
        height: 11px;
        text-align: center;
        color: #2f3;
    }

    #page-wrap a.wheels {
        left: -4px;
    }

    #page-wrap a.wheels:before,
    #page-wrap a.wheels:after {
        bottom: -29px;
    }

    #page-wrap a.wheels:before {
        left: 0;
    }

    #page-wrap a.wheels:after {
        left: 43px;
    }

    .train .train-head a {
        /*left: -8.5px;*/
        bottom: -3px;
    }

    .train li a.text {
        position: absolute;
        background-size: 300px 66px;
        left: 23px;
        font-size: 12px;
        display: inline-block;
        height: 22px;
        line-height: 25px;
        width: 56px;
        background-color: #fff;
        bottom: 14px;
    }

    .train li a.text:before,
    .train li a.text:after {
        content: '';
        width: 100%;
        position: absolute;
        display: block;
        background-color: #64b567;
        left: 0;
    }

    .train li a.text:before {
        height: 1px;
        top: 0;
    }

    .train li a.text:after {
        height: 1px;
        bottom: 0;
    }

    .train .train-head a span {
        width: 52px;
        height: 20px;
        line-height: 9px;
    }

    .pagination.pagination-list:before {
        content: '';
        z-index: 1;
        position: absolute;
        background-color: #fff;
        width: 14px;
        height: 16px;
        right: -1px;
        bottom: 23px;
    }


</style>
</head>
<body>
<div class="pagination-wrap">
    <!--<img src="/img/christmas-train.png" alt="">-->
    <div class="pagination flow-border zebra-line">
        <ul class="pagination-control-bar pagination train railway">
            <li class="disabled"><a class="wheels"> <span>上一页</span></a></li>
            <li><a class="wheels current"><span>第一页</span></a></li>
            <li id="page-wrap">
                <a class="wheels" href="/article/2000">
                    <input placeholder="第1页" id="page" class="page-input" name="page" type="text">
                </a>
                <!--<a href="/article/2000" class="wheels" ></a>-->
            </li>
            <li><a class="wheels"><span>下一页</span></a></li>
            <li class="train-head">
                <a class="wheels"><span></span></a>
                <a class="head-mask"></a>
                <a class="text">尾页</a>
            </li>
        </ul>
        <ul class="pagination-list pagination train railway">
            <li><a class="wheels" href="/article/2000"><span>1</span></a></li>
            <li><a class="wheels" href="/article/2000"><span>2</span></a></li>
            <li><a class="wheels" href="/article/2000"><span>3</span></a></li>
            <li><a class="wheels" href="/article/2000"><span>4</span></a></li>
            <li><a class="wheels" href="/article/2000"><span>5</span></a></li>
        </ul>
    </div>
    <div class="vine-border"></div>
</div>
</body>
</html>
